<template>
  <div>
    <a-card :bordered="false" style="margin-bottom: 12px">
      <!-- 查询区域 -->
      <a-form-model :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" layout="inline" @keyup.enter.native="onQuery">
        <a-form-model-item label="起止时间" style="min-width: 500px">
          <a-month-picker
            v-model="startValue"
            :disabled-date="disabledStartDate"
            format="YYYY-MM"
            placeholder="开始时间"
            @openChange="handleStartOpenChange"
          />
          <span style="padding: 0 10px">-</span>
          <a-month-picker
            v-model="endValue"
            :disabled-date="disabledEndDate"
            format="YYYY-MM"
            placeholder="结束时间"
            :open="endOpen"
            @openChange="handleEndOpenChange"
          />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
          <a-button type="primary" @click="onQuery"> 查询 </a-button>
          <a-button style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button type="primary" @click="handleExport()">批量导出</a-button>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <custom-table
          ref="table"
          rowKey="id"
          :showAlert="false"
          :showSelection="true"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          @selectedRow="onSelectedRow"
          @change="onTableChange"
        >
          <template slot="action" slot-scope="text, record">
            <a-button @click="handleDetails(record)" type="link" style="padding: 0">预览</a-button>
            <a-divider type="vertical" />
            <a-button @click="handleExport(record)" type="link" style="padding: 0">导出</a-button>
          </template>
        </custom-table>
      </div>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import * as reportApi from '@/api/smuggle/report.js'
import CustomTable from '@/components/zxd/Table/CustomTable'
import { downLoadMix } from '@/utils/export-util/util'

export default {
  inject: ['closeCurrent'],
  components: {
    CustomTable
  },
  data() {
    return {
      startValue: null,
      endValue: null,
      endOpen: false,
      loading: false,
      isDisabled: true,
      pdfUploadBool: false,
      form: {},
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 50,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}`, //序号分页后连续
        },
        {
          title: '报告日期',
          dataIndex: 'reportDate',
          width: 100,
          align: 'center',
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          width: 100,
          align: 'center',
        },
        {
          title: '操作',
          width: 100,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
      refNum: [],
      refCheckData: [],
      receivesData: [],
    }
  },
  // computed: {
  //   rowSelection() {
  //     return {
  //       getCheckboxProps: (record) => ({
  //         props: {
  //           // 报告未生成，不能导出
  //           disabled: record.isGenerate == 0, 
  //         },
  //       }),
  //     }
  //   },
  // },
  created() {},
  async mounted() {
    await this.onQuery()
  },
  methods: {
    onSelectedRow(keys) {
      this.isDisabled = keys.length > 0 ? false : true
    },
    async onQuery() {
      this.pageFilter.pageNo = 1
      this.$set(this.form, 'startTime', this.startValue ? moment(this.startValue).format('YYYY-MM') : '')
      this.$set(this.form, 'endTime', this.endValue ? moment(this.endValue).format('YYYY-MM') : '')
      await this.refreshTable()
    },
    onResetForm() {
      this.form = {}
      this.startValue = null
      this.endValue = null
      this.onQuery()
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    async refreshTable() {
      let form = Object.assign({}, this.form, this.pageFilter)
      this.loading = true
      this.pageData = {}
      let res = await reportApi.reportList(form)
      if (res.success) {
        this.loading = false
        this.pageData = res.result
        this.$refs.table.onClearRowKeys()
      } else {
        this.loading = false
        this.$message.error(res.message)
      }
    },
    handleDetails(record) {
      this.$router.push({
        path: '/smuggleReport/details',
        query: {
          id: record.id
        }
      })
    },
    handleExport(record) {
      let that = this
      let selectList = this.$refs.table.getSelectedRows()
      let fileList1 = selectList
        .map((v) => v.id)
        .filter((obj) => obj !== null && obj !== undefined && obj !== '')
      let fileList2 =
        record && Object.keys(record).length > 0 && record.id ? [record.id] : []
      let params =Object.assign({}, this.form, {
        fileList: selectList.length > 0 ? fileList1 : fileList2,
      })
      // if (params.fileList.length === 0) {
      //   this.$message.warn('导出文件不存在！')
      //   return
      // }
      this.$confirm({
        title: `是否确认导出报告？`,
        okText: '确定',
        onOk() {
          reportApi.exportReport(params).then(async (res) => {
            if (res && res.size && res.size > 0) {
              const fileName = '反走私分析报告.zip'
              await downLoadMix(res, fileName)
            } else {
              that.$message.warn('导出失败！')
            }
          })
        },
      })
    },
    disabledStartDate(startValue) {
      const endValue = this.endValue
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > endValue.valueOf()
    },
    disabledEndDate(endValue) {
      const startValue = this.startValue
      if (!endValue || !startValue) {
        return false
      }
      return startValue.valueOf() >= endValue.valueOf()
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.table-operator {
  display: flex;
  justify-content: space-between;
}
</style>